<template>
	<view class="content">
		<u-navbar title="支付" :placeholder='true' height="88rpx" leftIconColor="#fff" titleStyle='color:#fff;font-size:32rpx'
			left-icon-size="32rpx" bg-color="#FF594D" :autoBack="true">
		</u-navbar>

		<view class="money">
			<text>￥</text>{{orderPrice.toFixed(2)}}
		</view>
		<view class="pay">
			<u-radio-group activeColor="#F44236" size='40rpx' v-model="payMethod" placement="column" @change="groupChange">
				<view class="pay_content">
					<template v-for="(item, index) in radiolist1">
						<view class="pay_item">
							<u-radio :key="index" size='40rpx' labelSize='40rpx' :disabled="item.disabled" :label="item.label"
								:name="item.name">
							</u-radio>
							<u-icon :name="item.icon" :color="item.color" size="50rpx"></u-icon>
						</view>
						<!-- <u-line v-show="index%2==0"></u-line> -->
					</template>
				</view>
			</u-radio-group>
		</view>
		<view class="affirm">
			<view class="pay_button" @click="pay">
				确认支付
			</view>
		</view>
	</view>
</template>

<script>
	import {
		payAnOrder,
		orderInfo,
		bindmember
	} from '../../api/mine.js'
	export default {
		onLoad(option) {
			console.log(option);
			this.orderId = option.orderId
			this.getOrderInfo(this.orderId)
		},
		data() {
			return {
				radiolist1: [{
						name: '1',
						label: '微信支付',
						disabled: false,
						icon: 'weixin-circle-fill',
						color: '#28C445'
					},
					// {
					// 	name: '2',
					// 	label: '余额支付',
					// 	disabled: true,
					// 	icon: 'rmb-circle-fill',
					// 	color: '#FE9C01'
					// },
				],
				payMethod: '1',
				orderNumber: '',
				orderPrice: 0,
				orderId: '',
				balance: false
			}
		},
		created() {
			// if (this.$store.state.isMember) {
			// 	this.radiolist1[1].disabled = false
			// } else {
			// 	this.radiolist1[1].disabled = true
			// }
		},
		methods: {
			async userBindMember(data) {
				const res = await bindmember(data)
				if (res.code == 200) {
					uni.removeStorageSync(`order${_this.orderId}`)
				}
			},
			async pay() {

				const _this = this
				uni.getProvider({
					service: 'payment',
					async success(pay) {
						const res = await payAnOrder({
							orderNumber: _this.orderNumber,
							payMethod: _this.payMethod
						})
						if (res.code != 200) {
							uni.showToast({
								title: res.msg,
								icon: 'error'
							})
							return
						}
						uni.requestPayment({
							provider: 'wxpay',
							nonceStr: res.data.nonceStr,
							paySign: res.data.paySign,
							package: res.data.packageStr,
							signType: res.data.signType,
							timeStamp: res.data.timeStamp,
							success(request) {
								console.log(request);
								if (request.errMsg == 'requestPayment:ok') {
									const employeeId = uni.getStorageSync(`order${_this.orderId}`)
									if (employeeId != 0) {
										console.log('调用绑定会员', employeeId);
										_this.userBindMember({
											employeeId,
											userId: _this.$store.state.user.id
										})
									}
									uni.switchTab({
										url: '/pages/mine/mine',
										success() {
											_this.$store.commit('setTabValue', 4)
										}
									})
								}
							},
							fail(err) {
								console.log('失败', err);
							}
						})
					}
				})

			},
			async getOrderInfo(id) {
				const res = await orderInfo(id)
				this.orderNumber = res.data.number
				this.orderPrice = res.data.amount
				// console.log(res);
			},
			groupChange(n) {
				// console.log('groupChange', n);
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: #f3f3f3;
		min-height: 100vh;

		.money {
			font-size: 80rpx;
			color: #333332;
			text-align: center;
			padding: 30rpx;
			// margin-bottom: 30rpx;

			text {
				font-size: 40rpx;
			}
		}

		.affirm {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 750rpx;
			box-sizing: border-box;
			padding: 30rpx;

			.pay_button {
				// width: 100%;
				height: 70rpx;
				display: flex;
				color: #fff;
				border-radius: 10rpx;
				font-size: 30rpx;
				justify-content: center;
				align-items: center;
				background-color: #F44236;
			}

		}

		.pay {
			padding: 30rpx 30rpx 50rpx;

			.pay_content {
				background-color: #fff;
				padding: 20rpx;
				border-radius: 30rpx;

				.pay_item {
					height: 80rpx;
					justify-content: space-between;
					display: flex;
					align-items: center;
					padding: 0 20rpx;
				}
			}
		}
	}
</style>